<template>
   <!-- 筛选区 -->
   <div class="sub-filter">
     <!-- 固定 -->
     <div class="item">
       <div class="head">品牌：</div>
       <div class="body">
         <a :class="{active:brand.selected}"
         href="javascript:;"
         v-for="brand in subCategoryData.brands"
         :key="brand.id"
         @click="chooseBrand(brand)"
         >
         {{brand.name}}
         </a>
       </div>
     </div>
     <!-- 动态 -->
     <div class="item" v-for="item in subCategoryData.saleProperties" :key="item.id">
       <div class="head">{{item.name}}：</div>
       <div class="body">
         <a
         :class="{active:i.selected}"
         href="javascript:;"
         v-for="i in item.properties"
         :key="i.id"
         @click="chooseProp(i,item)"
         >
         {{i.name}}
         </a>
       </div>
     </div>
   </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'SubFilter',
  setup () {
    const subCategoryData = inject('subCategoryData')

    const filterParams = inject('filterParams')

    const chooseBrand = (currBrand) => {
      if (currBrand.selected === true) return
      filterParams.value.brandId = currBrand.id
      subCategoryData.value.brands.forEach(item => {
        item.selected = false
      })
      currBrand.selected = true
    }

    const chooseProp = (currProp, currprops) => {
      if (currProp.selected === true) return
      const index = filterParams.value.attrs.findIndex(item => item.groupName === currprops.name)
      if (index > -1) {
        filterParams.value.attrs.splice(index, 1)
      }
      filterParams.value.attrs.push({
        groupName: currprops.name,
        propertyName: currProp.name
      })
      currprops.properties.forEach(item => {
        item.selected = false
      })
      currProp.selected = true
    }

    return { subCategoryData, chooseBrand, chooseProp }
  }
}
</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    padding: 10px 0;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        display: inline-block;
        margin-right: 36px;
        margin-bottom: 20px;
        transition: all 0.3s;
        border: 1px solid #eee;
        padding: 6px;
        &.active,
        &:hover {
          color: @xtxColor;
          border-color: @xtxColor;
        }
      }
    }
  }
}
</style>
